<style type="text/css" scoped src="../style/login.css"></style>
<style type="text/css">
.code {
    background-color: #ffffff;
    font-family: Arial;
    font-style: italic;
    color: #313540;
    font-size: 24px;
    border: 0;
    padding: 2px 3px;
    letter-spacing: 3px;
    font-weight: bolder;
    float: left;
    cursor: pointer;
    width: 90px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    vertical-align: middle;
    border-radius:4px;
}

a {
    text-decoration: none;
    font-size: 12px;
    color: #313540;
}

a:hover {
    text-decoration: underline;
}
</style>

<template>
    <div class="logdiv">
        <!-- <div id="particles" class="loginback"> 
        </div>-->
        <Row type="flex" style="height:100%;" justify="center" align="middle">
            <Col :lg="{span:7}" :md="{span:11}" :sm="{span:15}" :xs="{span:22}">
            <div class="loginDiv">
                <Row>
                    <Col span=24>
                    <div style="margin-bottom:40px;">
                        <h1>云南省水果生产信息监测网上填报系统</h1>
                    </div>
                    </Col>
                </Row>
                <Row>
                    <Col span=24 align="middle">
                    <Form ref="UserModel" :model="UserModel" :rules="UserRule">
                        <form-item prop="Account">
                            <Input type="text" v-model="UserModel.Account" size="large" placeholder="请输入用户名" @keydown.enter="LoginIn('UserModel')">
                            <Icon type="person" slot="prepend" size='22' color="#01274B"></Icon>
                            </Input>
                        </form-item>
                        <form-item prop="Passwords">
                            <Input type="password" v-model="UserModel.Passwords" size="large" placeholder="请输入密码" @keydown.enter="LoginIn('UserModel')">
                            <Icon type="locked" slot="prepend" size='22' color="#01274B"></Icon>
                            </Input>
                        </form-item>
                        <form-item>
                            <Row :gutter="16">
                                <Col span="8">
                                <Form-item prop="validateCode">
                                    <Input type="text" v-model="UserModel.validateCode" size="large" placeholder="请输入验证码" @keyup.enter.native="LoginIn('UserModel')">
                                    <Icon type="locked" size='22' slot="prepend" color="#01274B"></Icon>
                                    </Input>
                                </form-item>
                                </Col>
                                <Col span="14">
                                <div @click="createCode" class="code" id="checkCode"></div>
                                <a href="#" style="color:#01274B" @click="createCode()">看不清?点击切换</a>
                                </Col>
                                <!--<Col span="5">
                                        <Checkbox v-model="UserModel.IsRember">记住我？</Checkbox>
                                        </Col>-->
                            </Row>
                        </form-item>
                        <form-item>
                            <Button type="primary" size="large" long @click="LoginIn('UserModel')" @keyup.enter.native="LoginIn('UserModel')">登录 </Button>
                        </form-item>
                    </Form>
                    </Col>
                </Row>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
import JParticles from 'jparticles';
export default {
    data: function () {
        const validateVerCode = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码！'));
            } else {
                if (value.toUpperCase() !== this.verCode.toUpperCase()) {
                    callback(new Error('验证码不正确!'));
                }
                callback();
            }
        }
        return {
            verCode: "",
            UserModel: {
                Account: '',
                Passwords: '',
                validateCode: ''
            },
            UserRule: {
                Account: [
                    { required: true, message: '请填写登录帐号', trigger: 'blur' }
                ],
                Passwords: [
                    { required: true, message: '请填写登录密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ],
                validateCode: [
                    { required: true, message: '请填写验证码', trigger: 'blur' },
                    { validator: validateVerCode, trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        new JParticles.particle('#particles', {
            color: '#ffffff',
            range: 2000,
            proximity: 100,
            parallax: true
        });
        // new JParticles.wave('#particles', {
        //     num: 3,
        //     // 不填充
        //     fill: false,
        //     // 绘制边框，即线条
        //     line: true,
        //     // 三条线依次的颜色
        //     lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
        //     // 三条线依次的宽度
        //     lineWidth: [.5, .7, .9],
        //     // 三条线依次距左的偏移值
        //     offsetLeft: [5, 3, 0],
        //     // 三条线都向上偏移容器高度的 0.75 倍
        //     offsetTop: .75,
        //     // 三条线依次的波峰高度
        //     crestHeight: [10, 14, 18],
        //     // 三条线都只有两个波峰（波纹）
        //     rippleNum: 2,
        //     speed: .1
        // });
    },
    methods: {
        LoginIn(name) {//登录事件
            this.$refs[name].validate((valid) => {
                if (valid) {
                    var self = this;
                    self.$http.post('Account', self.UserModel).then(function (res) {
                        if (res.data.status == 1) {
                            var CurrentUserModel = new Object();
                            CurrentUserModel.Account = res.data.model.Account;
                            CurrentUserModel.UserId = res.data.model.Id;
                            CurrentUserModel.UserName = res.data.model.UserName;
                            CurrentUserModel.AreaCode = res.data.model.AreaCode;
                            self.SetlocaStorage("fruuserinfo", CurrentUserModel);
                            self.SetlocaStorage("fruuseractionlist", res.data.model.ActionList);
                            if (res.data.model.LastLoginTime == null) {
                                self.$router.push('/sys/userinfo');//登录跳转
                            } else {
                                self.$router.push('/home');//登录跳转
                            }

                        }
                        else {
                            self.$Modal.error({ title: '提示信息', content: res.data.message });
                        }
                    });
                }
            })
        },
        //重置
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        createCode() {
            this.verCode = "";
            var codeLength = 4; //验证码的长度
            var checkCode = document.getElementById("checkCode");
            var codeChars = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
            for (var i = 0; i < codeLength; i++) {
                var charNum = Math.floor(Math.random() * 52);
                this.verCode += codeChars[charNum];
            }
            if (checkCode) {
                checkCode.className = "code";
                checkCode.innerHTML = this.verCode;
            }
        },
        getAreaTreeData() {
            var self = this;
            self.$http.get('Area/GetCascaderTree', { params: { id: "" } }).then(function (res) {
                console.log(res.data.model);
                self.SetlocaStorage("areatreelist", res.data.model);
            });
        },
        getAreaData() {
            var self = this;
            this.$http.get('Area').then(function (res) {
                self.SetlocaStorage("arealist", res.data.model);
            });
        },
        getDictData() {
            var self = this;
            this.$http.get('Dict/GetList').then(function (res) {
                self.SetlocaStorage("dictlist", res.data.model);
            });
        }
        // getInitData() {
        //     var self = this;
        //     console.log(this.$http);
        //     this.$http.all([this.getAreaData(),this.getDictData()]).then(self.$http.spread((res1, res2) => {
        //             console.log(res1)
        //             console.log(res2)
        //         }));
        // }
    },
    //创建Vue页面方法
    created: function () {
        this.getAreaTreeData();
        this.getAreaData();
        this.getDictData();
        setTimeout(() => {
            this.createCode();
        }, 500);
    }
}
</script>